<template>
	<view class="login">
		<view class="header">
			<view class="left-header">
				<image src="../../static/logo.png" mode="widthFix"></image>
				<view class="logotext">logo</view>
			</view>
			<view class="right-header">先逛一逛</view>
		</view>
		<view class="welcome">Welcome</view>
		<view class="please">please ge me yi tuo</view>
		<view class="form">
			<up-form labelPosition="left" :model="loginData" ref="form1">
				<up-form-item label="手机号" borderBottom ref="item1">
					<up-input v-model="loginData.phone" border="none"></up-input>
				</up-form-item>

				<up-form-item label="密码" borderBottom ref="item1">
					<up-input v-model="loginData.password" placeholder="请输入密码" border="none"></up-input>
					<template #right>
						<uv-icon :name="showEye ? 'eye-fill' : 'eye-off'" size="25" @click="showEye = !showEye"></uv-icon>
					</template>
				</up-form-item>
			</up-form>
		</view>

		<view class="forget">忘记密码</view>
		<view class="login-btn btn" @click="submitLoginForm">登录</view>
		<view class="register-btn btn" @click="opeRegisternPopup = !opeRegisternPopup">注册</view>
		<up-popup :show="opeRegisternPopup"  type="bottom" height="50%" @close="closeRegisterPopup" >
			<view class="register-box">
				<view class="title-x">
					<view class="title">
						注册
					</view>
					<uni-icons type="closeempty" size="30" color="#ffaa7f" @click="closePopup()"></uni-icons>
					
				</view>
				<view class="form-register">
					<up-form labelPosition="left" :model="loginData" ref="form1">
						
						<up-form-item label=",名称" borderBottom ref="item1">
							<up-input v-model="loginData.nickname" border="none"></up-input>
						</up-form-item>
						
						<up-form-item label="手机号" borderBottom ref="item1">
							<up-input v-model="loginData.phone" border="none"></up-input>
						</up-form-item>
					
						<up-form-item label="密码" borderBottom ref="item1">
							<up-input v-model="loginData.password" placeholder="请输入密码" border="none"></up-input>
							<template #right>
								<uv-icon :name="showEye ? 'eye-fill' : 'eye-off'" size="25" @click="showEye = !showEye"></uv-icon>
							</template>
						</up-form-item>
					</up-form>
					
				</view>
				
				
				
				
			</view>
		</up-popup>
	</view>
</template>

<script>
const showEye = ref(false);
const opeRegisternPopup = ref(false);
const loginData = ref({
	phone: '',
	password: ''
});
const sendRegisterData = ref({
	phone: '', //手机号
	password: '', //
	nickname: ''
});
const closeRegisterPopup =()=>{
	opeRegisternPopup = false;
}
</script>

<style lang="scss">
.login {
	overflow: hidden;
	.header {
		height: 100rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #f9f9f9;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.left-header {
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
			}
			.luckin {
				color: #646566;
				font-weight: 600;
				margin-left: 20rpx;
			}
		}
		.right-header {
			color: #0c34ba;
			font-weight: 600;
		}
	}

	.welcome {
		font-size: 48rpx;
		font-weight: 800;
		padding: 20rpx;
		padding-top: 120rpx;

		color: #646566;
	}
	.please {
		padding: 40rpx 20rpx;
		color: #646566;
	}
	.form {
		margin: 30rpx;
		font-weight: 600;
		color: #646566;
	}
	.forget {
		float: right;
		color: #646566;
		font-size: 30rpx;
		margin-right: 30rpx;
	}

	.login-btn {
		margin: 0 30rpx;
		margin-top: 100rpx;
		background: #0c34ba;
	}
	.btn {
		margin: 0 30 rpx;
		margin-top: 100rpx;
		background: #0c34ba;
		line-height: 100rpx;
		text-align: center;
		color: white;
		border-radius: 50rpx;
	}
	.register-btn {
		margin: 0 30rpx;
		margin-top: 100rpx;
		color: black;
		border: 1rpx solid gray;
	}

	.register-box {
		height: 600rpx;
		background: white;
		padding: 30rpx;
		.title-x {
			display: flex;
			justify-content: space-between;
		}
		.title {
			color: #646566;
			font-weight: 600;
			font-size: 52rpx;
		}
	}
}
</style>
